<template>
  <el-container>
    <div class="top" v-if="btnFlag" @click="backTop">
      <i class="el-icon-top"></i>
    </div>
    <!-- <el-header>
        <sidebary class="marfc" />
    </el-header>-->
    <el-main class="Searchbox">
      <el-card class="box-card" shadow="never">
        <el-page-header @back="goBack" :content="questionName"></el-page-header>
      </el-card>
      <br />
      <el-card class="box-card" shadow="never">
        <table border="1" v-if="questionTypeId == 'cf6d84eb727b48519f31d5362abf7153'">
          <tbody v-for="(item , index) in AddDeptData">
            <tr>
              <th rowspan="2">被评价</th>
              <th rowspan="2">{{item[0].coverOptionsName}}</th>
              <th>评价</th>
              <th v-for="itemsd in item">{{itemsd.optionsName}}</th>
            </tr>
            <tr>
              <th>得分</th>
              <th v-for="itemsd in item">
                <input
                  type="number"
                  :disabled="disabled"
                  style=" text-align: center; width: 100px;"
                  onkeyup="this.value = this.value.replace(/[^\d]/g,0);"
                  v-model="itemsd.optionsResult"
                  placeholder="请输入内容"
                />
              </th>
            </tr>
          </tbody>
        </table>

        <el-form label-width="160px" v-if="questionTypeId == 'cf6d84eb727b48519f31d5362abf7153'">
          <el-form-item label="意见与建议:">
            <el-input disabled type="textarea" v-model="oldData.opinion" style=" width: 800px;     height: 100px;"></el-input>
          </el-form-item>
        </el-form>

        <el-form :model="form" label-position="right" disabled v-for="(item, index) in AddDeptData" v-if="questionTypeId == '54e3da78fb334841bb5cce4a6b927c7d'">
          <template v-if="index == 0">
            <el-form-item label="问卷名称：" label-width="100px">
              {{
              item.questionName
              }}
            </el-form-item>
            <el-form-item label="年份：" label-width="100px">
              {{
              item.year
              }}
            </el-form-item>
            <el-form-item label="评价类型：" label-width="100px">
              {{
              item.evaluationTypeName
              }}
            </el-form-item>
            <el-form-item label="问卷类型：" label-width="100px">
              {{
              item.questionTypeName
              }}
            </el-form-item>
            <el-form-item label="备注：" label-width="100px">
              {{
              item.remarks
              }}
            </el-form-item>
            <el-divider></el-divider>
          </template>

          <el-form-item label="部门名称：" label-width="100px" style="background-color: #ccc;  ">{{ item.coverDeptName }}</el-form-item>
          <el-row :gutter="10" v-for="(items, i) in item.details" :key="i">
            <el-col :span="8">
              <el-form-item label="评价：" label-width="100px">{{items.optionsName}}</el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="得分：" label-width="100px">
                <el-input style=" width: 100px;" type="number" onkeyup="this.value = this.value.replace(/[^\d]/g,0);" v-model="items.optionsResult"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="原因：" label-width="100px">
                <el-input type="textarea" v-model="items.reason"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-form>

        <el-form :model="form" label-position="right" disabled v-for="(item, index) in AddDeptData" v-if="questionTypeId == '7c680ab28aa1454ebbb15c9ae1965876'">
          <template v-if="index == 0">
            <el-form-item label="问卷名称：" label-width="100px">
              {{
              item.questionName
              }}
            </el-form-item>
            <el-form-item label="年份：" label-width="100px">
              {{
              item.year
              }}
            </el-form-item>
            <el-form-item label="评价类型：" label-width="100px">
              {{
              item.evaluationTypeName
              }}
            </el-form-item>
            <el-form-item label="问卷类型：" label-width="100px">
              {{
              item.questionTypeName
              }}
            </el-form-item>
            <el-form-item label="备注：" label-width="100px">
              {{
              item.remarks
              }}
            </el-form-item>
            <el-divider></el-divider>
          </template>

          <el-form-item label="部门名称：" label-width="100px" style="background-color: #909399;">{{ item.coverDeptName }}</el-form-item>
          <h4>服务质量：</h4>
          <el-row :gutter="10" v-for="(items, i) in item.details" v-if="items.dataType == 'quality'">
            <el-col :span="8">
              <el-form-item label="评价：" label-width="100px">
                {{
                items.optionsName
                }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="得分：" label-width="100px">
                <el-input style=" width: 100px;" type="number" onkeyup="this.value = this.value.replace(/[^\d]/g,0);" v-model="items.optionsResult"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="原因：" label-width="100px">
                <el-input type="textarea" v-model="items.reason"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <h4>核心工作:</h4>

          <el-row :gutter="10" v-for="(items, i) in item.details" v-if="items.dataType == 'work'">
            <el-col :span="8">
              <el-form-item label="评价：" label-width="100px">
                {{
                items.optionsName
                }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="得分：" label-width="100px">
                <el-input style=" width: 100px;" type="number" onkeyup="this.value = this.value.replace(/[^\d]/g,0);" v-model="items.optionsResult"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="原因：" label-width="100px">
                <el-input type="textarea" v-model="items.reason"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider></el-divider>
        </el-form>
      </el-card>
      <el-card class="box-card" shadow="never" v-if="false">
        <table border="1">
          <tbody v-for="(item , index) in AddDeptData">
            <tr>
              <th rowspan="2">被评价</th>
              <th rowspan="2">{{item[0].coverOptionsName}}</th>
              <th>评价</th>
              <th v-for="itemsd in item">{{itemsd.optionsName}}</th>
            </tr>
            <tr>
              <th>得分</th>
              <th v-for="itemsd in item">
                <el-input disabled style=" text-align: center; width: 100px;" v-model="itemsd.optionsResult" placeholder="请输入内容"></el-input>
              </th>
            </tr>
          </tbody>
        </table>
      </el-card>
    </el-main>
    <div class="footer">
      <div class="gotop" v-show="gotop" @click="toTop">
         <i class="el-icon-caret-top"></i>
      </div>
    </div>
  </el-container>
</template>

<script>
import sidebary from "@/components/sidebary";

import {
  getQuestionHistoryToPage,
  getHistoryDetailByQuestionId,
  UpdateHistoryDetail,
  getDictionariesByType,
} from "@/api/api";

export default {
  data() {
    return {
      id: "",
      oldData: [],
      gotop: false,
      questionTypeId: "",
      questionName: "",
      AddDeptData: [],
      disabled: true, // true 是禁止 false 允许
    };
  },
  components: {
    sidebary,
  },

  created() {
    let that = this;
  },

  mounted() {
    let that = this;
    that.id = that.$route.query.id;
    that.questionTypeId = that.$route.query.questionTypeId;
    this.handleClick(that.id, that.questionTypeId);
    window.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
  methods: {
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },

    goBack() {
      this.$router.go(-1);
    },

    async doUpdateHistoryDetail(flag) {
      let that = this;
      if (flag == "N") {
        if (that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153") {
          that.oldData[0].isCommit = "N";
        } else {
          for (let i = 0; i < that.AddDeptData.length; i++) {
            that.AddDeptData[i].isCommit = "N";
          }
        }
      }
      if (flag == "N") {
        for (let i = 0; i < that.AddDeptData.length; i++) {
          for (let e = 0; e < that.AddDeptData[i].length; e++) {
            if (that.AddDeptData[i][e].optionsResult == "") {
              that.AddDeptData[i][e].optionsResult = 0;
            }
          }
        }
      }
      if (flag == "Y") {
        let panduan = true;
        let kong = true;
        let msg = "";
        if (that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153") {
          for (let i = 0; i < that.AddDeptData.length; i++) {
            for (let e = 0; e < that.AddDeptData[i].length; e++) {
              if (that.AddDeptData[i][e].optionsResult < 60) {
                panduan = false;
                msg = "请将评价内容填写完整，分数不得小于60分";
                break;
              }

              if (that.AddDeptData[i][e].optionsResult > 100) {
                panduan = false;
                msg = "请将评价内容填写完整，分数不得大于100分";
                break;
              }
            }
          }

          that.oldData[0].isCommit = "Y";
        } else {
          for (let i = 0; i < that.AddDeptData.length; i++) {
            that.AddDeptData[i].isCommit = "Y";
            for (let e = 0; e < that.AddDeptData[i].details.length; e++) {
              if (!panduan || !kong) {
                break;
              }
              if (
                that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153" &&
                that.AddDeptData[i].details[e].optionsResult < 60
              ) {
                panduan = false;
                msg = "请将评价内容填写完整，分数不得小于60分";
                break;
              } else if (
                that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153" &&
                that.AddDeptData[i].details[e].optionsResult > 100
              ) {
                panduan = false;
                msg = "请将评价内容填写完整，分数不得大于于100分";
                break;
              } else if (
                that.questionTypeId != "cf6d84eb727b48519f31d5362abf7153" &&
                that.AddDeptData[i].details[e].optionsResult == ""
              ) {
                panduan = false;
                msg =
                  "请将" +
                  that.AddDeptData[i].coverDeptName +
                  "评价内容填写完整，分数不能为空";
                break;
              } else if (
                that.questionTypeId != "cf6d84eb727b48519f31d5362abf7153" &&
                that.AddDeptData[i].details[e].optionsResult > 100
              ) {
                panduan = false;
                msg =
                  "请将" +
                  that.AddDeptData[i].coverDeptName +
                  "评价内容填写完整，分数不得大于100分";
                break;
              } else if (
                that.questionTypeId != "cf6d84eb727b48519f31d5362abf7153" &&
                that.AddDeptData[i].details[e].optionsResult < 60 &&
                that.AddDeptData[i].details[e].optionsResult != 0
              ) {
                panduan = false;
                msg =
                  "请将" +
                  that.AddDeptData[i].coverDeptName +
                  "的评价内容填写完整，分数不得小于60分";
                break;
              } else if (
                that.questionTypeId == "7c680ab28aa1454ebbb15c9ae1965876" &&
                that.AddDeptData[i].details[e].optionsResult < 60
              ) {
                panduan = false;
                msg =
                  "请将" +
                  that.AddDeptData[i].coverDeptName +
                  "的评价内容填写完整，分数不得小于60分";
                break;
              }
              if (that.questionTypeId != "cf6d84eb727b48519f31d5362abf7153") {
                if (
                  that.AddDeptData[i].details[e].reason == null ||
                  that.AddDeptData[i].details[e].reason == ""
                ) {
                  kong = false;
                  msg =
                    "请将" +
                    that.AddDeptData[i].coverDeptName +
                    "的评价内容填写完整，原因不能为空";
                  break;
                }
              }
            }
          }
        }
        if (!panduan) {
          this.$message.error(msg);
          return;
        }
        if (!kong) {
          this.$message.error(msg);
          return;
        }
      }
      let params = [];
      if (that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153") {
        that.oldData[0].listDeatail = that.AddDeptData;
        params = that.oldData;
      } else {
        params = that.AddDeptData;
      }

      let res = await UpdateHistoryDetail(params);
      if (res.data.Code == 200) {
        this.$message.success(res.data.Msg);
        that.dialogFormVisible = false;
        that.goBack();
        // that.getCompanyToPages();
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },

    async handleClick(id, questionTypeId) {
      let that = this;
      that.questionTypeId = questionTypeId;
      that.flag = 2;
      that.title = "答题";
      that.dialogFormVisible = !that.dialogFormVisible;
      let params = {
        questionId: id,
      };
      let res = await getHistoryDetailByQuestionId(params);
      if (res.data.Code == 200) {
        if (that.questionTypeId == "cf6d84eb727b48519f31d5362abf7153") {
          that.oldData = res.data.Data;
          that.AddDeptData = res.data.Data[0].listDeatail;
        } else {
          that.AddDeptData = res.data.Data;
          that.disabled = that.$route.query.disabled;
        }
        that.questionName = res.data.Data[0].questionName;
      } else if (res.data.Code == 400) {
        this.$message.warning(res.data.Msg);
      } else if (res.data.Code == 401) {
        this.$router.push({ path: "/login" });
      }
    },
  },
};
</script>

<style scoped>
.el-container{
  display:contents;
}
.footer .gotop {
  text-align: center;
  position: fixed;
  right: 50px;
  bottom: 30px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  background: white;
  color: #000000;
}

.top {
  position: fixed;
  right: 60px;
  background: #eee;
  bottom: 56px;
  padding: 10px;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.top i {
  text-align: center;
  display: block;
  line-height: 30px;
  font-size: 26px;
}

input {
  text-align: center;
  height: 28px;
  line-height: 28px;
  border: 1px #c0c4cc solid;
  border-radius: 5px;
}
input:focus {
  border-bottom: 2px solid #0f996b;
}

.buttombox {
  width: 100%;
  text-align: center;
}
.box-card {
  width: 80%;
  margin: 0 auto;
}
.el-divider {
  margin-top: 45px;
}

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
  padding: 5px;
}

/*表格样式*/
table {
  width: 90%;
  background: #ccc;
  margin: 10px auto;
  border-collapse: collapse; /*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
}
th,
td {
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #ccc;
}
th {
  background: #eee;
  font-weight: normal;
}
tr {
  background: #fff;
}
tr:hover {
  background: #fefefe;
}
</style>
